<template>
	<div class="w1450 ">
		<div class="tips f12 c878">首页 / 行业会议</div>
		<div class="bfff main align-start">
			<div class="left">
				<div class="input-box">
					<div class="f12 ctheme fbold mb5">会议名称</div>
					<input type="text" placeholder="请输入会议名称" class="f14 input myinput" v-model="name">
					<div class="f12 ctheme fbold mb5 mt20">会议主题</div>
					<el-select v-model="value" placeholder="请选择活动类型" class="input">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<div class="space-between mt30">
						<el-button type="primary" round size="small">搜索</el-button>
						<el-button type="default" plain round size="small" @click="reset">重置</el-button>
					</div>
				</div>
				<div class="btn-box">
					<el-button :type="nav==0?'primary':'default'" :plain="nav!=0" class="mb20" @click="nav=0"
						size="small">最新发布</el-button>
					<el-button :type="nav==1?'primary':'default'" :plain="nav!=1" class="mb20" @click="nav=1"
						size="small">热度最高</el-button>
					<el-button :type="nav==2?'primary':'default'" :plain="nav!=2" class="mb20" @click="nav=2"
						size="small">即将开始</el-button>
				</div>
			</div>
			<div class="flex1 right">
				<div class="flex-start fWrap">
					<div class="active-box" v-for="v in 8" :key="v">
						<div class="img-box posr cfff mb10 pointer">
							<img src="@/assets/activity/356.webp" alt="" class="cover" />
							<img src="@/assets/activity/end.png" alt="" class="status-icon posa" v-if="v==2" />
							<img src="@/assets/activity/in.png" alt="" class="status-icon posa" v-else />
							<div class="w100 space-between posa f12">
								<div>会议</div>
								<div>六西格玛专项</div>
							</div>
						</div>
						<div class="line2 f16 ">基于矿压监测大数据的顶板灾害智能预警技术研大会显示两行超出隐藏…</div>
						<div class="f12 c878 mb5">开始：2023-12-21 08:30</div>
						<div class="f12 c878">截止：2023-12-21 08:30</div>
					</div>
				</div>
				<div class="flex-end">
					<el-pagination background :current-page.sync="currentPage3" :page-size="pageSize3"
						layout="prev, pager, next, sizes, jumper" :total="120" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'index',
		data() {
			return {
				nav: 0,
				currentPage3: 1,
				pageSize3: 10,
				value: '',
				name: '',
				options: [{
						value: 'Option1',
						label: 'Option1',
					},
					{
						value: 'Option2',
						label: 'Option2',
					},
					{
						value: 'Option3',
						label: 'Option3',
					},
					{
						value: 'Option4',
						label: 'Option4',
					},
					{
						value: 'Option5',
						label: 'Option5',
					},
				]
			}
		},
		methods: {
			handleSizeChange(val) {
				console.log(`${val} items per page`)
			},
			handleCurrentChange(val) {
				console.log(`current page: ${val}`)
			},
			reset() {
				this.name = ''
				this.value = ''
			}
		}
	}
</script>
<style lang='scss' scoped>
	::v-deep .right {
		padding: 30px 47px;

		.active-box {
			width: 261px;
			margin-bottom: 40px;

			&:not(:nth-of-type(4n)) {
				margin-right: 25px;
			}

			&:hover {
				.cover {
					transform: scale(1.1);
				}

				.line2 {
					color: #007BFF;
				}
			}
		}

		.img-box {
			width: 261px;
			height: 174px;
			overflow: hidden;

			.w100 {
				left: 0;
				bottom: 0;
				padding: 10px;
			}

			.status-icon {
				width: 48px;
				height: 18px;
				left: 0;
				top: 2px;
			}

			.cover {
				width: 261px;
				height: 174px;
				border-radius: 8px;
				transition: all .3s;
			}


		}

		.line2 {
			line-height: 22px;
			margin: 10px 0 4px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
		}

		.status {
			left: 0;
			top: 0;
		}

		.img-box,
		.cover {
			width: 260px;
			height: 170px;
			border-radius: 8px;

			.w100 {
				left: 0;
				bottom: 0;
			}
		}

		
	}

	input::placeholder {
		color: #CFDCE8 !important;
		font-size: 14px !important;
	}

	::v-deep .btn-box {
		padding: 30px 20px;

		.el-button.is-plain {
			background-color: #EBF2F8;
		}

		.el-button {
			display: block;
			width: 100%;
			margin-left: 0;
		}
	}

	.myinput {
		padding: 0 10px;
	}

	::v-deep .input {
		width: 140px;
		height: 30px;
		background: #EBF2F8;
		border-radius: 4px;
		color: #333;
		display: block;

		.el-input__suffix {
			line-height: 50px;
		}

		.el-input__inner {
			font-size: 14px;
			background-color: initial;
			border: none;
			height: 30px;
			line-height: 30px;
			padding: 0 10px;

			&::placeholder {
				color: #CFDCE8 !important;
				font-size: 14px !important;
			}
		}
	}

	.input-box {
		padding: 30px 20px;
		border-bottom: 1px solid #EBF2F8;
	}

	.left {
		width: 180px;
		border-right: 1px solid #EBF2F8;
		height: 704px;
	}

	.main {
		width: 1400px;
		border-radius: 8px;
		border: 1px solid #EBF2F8;
	}

	.tips {
		padding: 20px 0;
	}
</style>